/*省市联动：数组的内容显示在页面
 1、首先定义省
 2、获取下拉列表元素对象
 3、省份下拉列表数据显示出来
 4、给省份下拉；列表添加改变事件
 城市下拉列表数据显示出来*/


//1、首先定义省份和对应城市的数组
var provinceArr=['浙江','江苏','上海'];
var cityArr=[
  ['杭州','宁波','温州','绍兴','台州'],
  ['南京','苏州','无锡','扬州'],
  ['黄浦区','浦东区','静安区']
  ];
  //2、获取下拉列表元素对象
  var province=document.getElementById('province');
  var city=document.getElementById('city');
  //3、省份下拉列表数据显示出来
  //循环遍历省份一维数组，将数据添加到下拉列表中
  //通过Option对象创建html中<select>标签内的<option>
  for (var i in provinceArr){
  	//<option value="0">浙江</option>
  	//Optoion(x,y): x:文本，y:value
  	var op=new Option(provinceArr[i],i);
  	province.options.add(op);
  	
  	//4、给省份下拉列表添加改变事件
  	province.onchange=function(){
  		city.length=0;
  		//城市下拉列表数据显示出来
  		//1)获得选中的当前省份
  	   var selected=province.value
  	   //2)对应的城市数据 cityarr[selected]
  	  for (var j in cityArr [selected]){
  	  	var op=new Option(cityArr[selected][j],j);
  	  	city.options.add(op);
  	  }
  	  
  	}
  }
